import { MyFile } from '../../type'
import { CSSProperties, JSX, useState } from 'react'
import { FolderOutlined, RightOutlined } from '@ant-design/icons'
import { FileTree } from './file-tree'
import cs from 'classnames'
import styles from './file-item.module.scss'

interface Props {
  file: MyFile
  expand?: boolean
  deep: number
}

export function FileItem(props: Props): JSX.Element {
  const [expand, setExpand] = useState(!!props.expand)

  const iconStyle: CSSProperties = {
    color: 'rgba(255, 220, 120)',
    fontSize: 30
  }

  const itemStyle: CSSProperties = {
    paddingLeft: props.deep * 20
  }

  const onFileClick = (): void => {
    if (props.file.isDirectory) {
      setExpand((expand) => !expand)
    }
  }

  return (
    <div>
      <div
        onClick={onFileClick}
        className={cs('flex h-10 items-center', 'px-2', styles['item-box'])}
        style={itemStyle}
      >
        {props.file.isDirectory && (
          <RightOutlined className={cs(styles['arrow-icon'], { [styles['r-90']]: expand })} />
        )}
        {props.file.isDirectory && <FolderOutlined className="mr-2" style={iconStyle} />}
        <p className={cs({ 'ml-4': !props.file.isDirectory })}>{props.file.path}</p>
      </div>
      {expand && props.file.children && (
        <FileTree deep={props.deep + 1} files={props.file.children} />
      )}
    </div>
  )
}
